<!--
  Label Demo Component

  This demo shows how to use labels in CesiumJS to display text on the globe.
  It demonstrates different label properties like font, scale, color, and styling.

  Category: Basic

  Component Documentation:
  ========================

  Title: Label Demo
  Description: This demo shows how to use labels in CesiumJS to display text on the globe. It demonstrates different label properties like font, scale, color, and styling.
  Features:
    - Basic label creation
    - Custom fonts and styling
    - Label positioning and orientation
    - Dynamic label properties
-->

<template>
  <BaseCesiumViewer 
    ref="cesiumViewer" 
    
    @viewer-ready="onViewerReady"
  />
</template>

<script>
import BaseCesiumViewer from '../core/BaseCesiumViewer.vue';
import { setViewRectangle } from '../utils';

export default {
  name: 'LabelDemo',
  components: {
    BaseCesiumViewer
  },
  setup() {

    const onViewerReady = (payload) => {
      // Check if payload and viewer are valid
      if (!payload || !payload.viewer) {
        console.error('Viewer is not ready or payload is invalid');
        return;
      }
      
      const { viewer, Cesium } = payload;
      
      // Create basic label
      viewer.entities.add({
        name: 'Basic Label',
        position: Cesium.Cartesian3.fromDegrees(-75.1652, 39.9526),
        label: {
          text: 'Philadelphia',
          font: '14px sans-serif',
          fillColor: Cesium.Color.WHITE,
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 2,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          pixelOffset: new Cesium.Cartesian2(0, -30)
        }
      });

      // Create label with custom styling
      viewer.entities.add({
        name: 'Styled Label',
        position: Cesium.Cartesian3.fromDegrees(-74.0060, 40.7128),
        label: {
          text: 'New York',
          font: 'bold 16px Arial',
          fillColor: Cesium.Color.YELLOW,
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 3,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          pixelOffset: new Cesium.Cartesian2(0, -30)
        }
      });

      // Create label with background
      viewer.entities.add({
        name: 'Label with Background',
        position: Cesium.Cartesian3.fromDegrees(-77.0369, 38.9072),
        label: {
          text: 'Washington D.C.',
          font: '14px sans-serif',
          fillColor: Cesium.Color.WHITE,
          backgroundColor: Cesium.Color.RED.withAlpha(0.7),
          backgroundPadding: new Cesium.Cartesian2(7, 5),
          style: Cesium.LabelStyle.FILL,
          pixelOffset: new Cesium.Cartesian2(0, -30)
        }
      });

      // Create label with horizontal origin
      viewer.entities.add({
        name: 'Label with Horizontal Origin',
        position: Cesium.Cartesian3.fromDegrees(-87.6298, 41.8781),
        label: {
          text: 'Chicago',
          font: '14px sans-serif',
          fillColor: Cesium.Color.CYAN,
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 2,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          pixelOffset: new Cesium.Cartesian2(10, -30)
        }
      });

      // Create 3D label
      viewer.entities.add({
        name: '3D Label',
        position: Cesium.Cartesian3.fromDegrees(-118.2437, 34.0522, 100000.0),
        label: {
          text: 'Los Angeles\n100km altitude',
          font: '14px sans-serif',
          fillColor: Cesium.Color.WHITE,
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 2,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          pixelOffset: new Cesium.Cartesian2(0, -30)
        }
      });

      // Set initial view to show all labels
      setViewRectangle(viewer, {
        west: -120,
        south: 20,  // Lowered to include Los Angeles
        east: -65,  // Extended eastward to include Philadelphia
        north: 45
      });
    };

    return {
      onViewerReady
    };
  }
};
</script>